<template>
  <div class="example-container">
    <n-card title="路由和账户信息使用示例" class="example-card">
      <n-space vertical size="large">
        <!-- 基础信息 -->
        <n-card title="基础信息" size="small">
          <n-descriptions :column="2" bordered>
            <n-descriptions-item label="用户标识">
              <n-tag type="info">{{ uniqueStr }}</n-tag>
            </n-descriptions-item>
            <n-descriptions-item label="当前路径">
              <n-text code>{{ $route.fullPath }}</n-text>
            </n-descriptions-item>
            <n-descriptions-item label="控制台链接">
              <n-text code>{{ getUcenterPath('/dashboard/console') }}</n-text>
            </n-descriptions-item>
            <n-descriptions-item label="工作台链接">
              <n-text code>{{ getUcenterPath('/dashboard/workplace') }}</n-text>
            </n-descriptions-item>
          </n-descriptions>
        </n-card>

        <!-- 账户信息 -->
        <n-card title="账户信息" size="small">
          <div v-if="loading" class="loading-container">
            <n-spin size="small" />
            <span>加载账户信息中...</span>
          </div>
          
          <div v-else-if="error" class="error-container">
            <n-alert type="error" :title="error" />
            <n-button @click="refreshAccountInfo" class="retry-btn">
              重新获取
            </n-button>
          </div>
          
          <div v-else-if="accountInfo">
            <n-descriptions :column="2" bordered>
              <n-descriptions-item label="会员名称">
                {{ accountInfo.member_name }}
              </n-descriptions-item>
              <n-descriptions-item label="账户类型">
                <n-tag :type="getAccountTypeColor(accountInfo.account_type)">
                  {{ getAccountTypeText(accountInfo.account_type) }}
                </n-tag>
              </n-descriptions-item>
              <n-descriptions-item label="组织名称">
                {{ accountInfo.group_name }}
              </n-descriptions-item>
              <n-descriptions-item label="账户余额">
                <n-text :type="getBalanceType(accountInfo.balance)">
                  ¥{{ formatNumber(accountInfo.balance) }}
                </n-text>
              </n-descriptions-item>
              <n-descriptions-item label="授信额度">
                <n-text type="info">¥{{ formatNumber(accountInfo.credit) }}</n-text>
              </n-descriptions-item>
              <n-descriptions-item label="缓存状态">
                <n-tag :type="isCacheExpired ? 'warning' : 'success'" size="small">
                  {{ isCacheExpired ? '已过期' : `剩余 ${cacheRemainingTime}s` }}
                </n-tag>
              </n-descriptions-item>
            </n-descriptions>
            
            <n-space class="action-buttons">
              <n-button @click="refreshAccountInfo" :loading="loading">
                刷新账户信息
              </n-button>
              <n-button @click="clearAccountInfo">
                清除缓存
              </n-button>
            </n-space>
          </div>
          
          <div v-else class="no-data">
            <n-empty description="暂无账户信息">
              <template #extra>
                <n-button @click="refreshAccountInfo">获取账户信息</n-button>
              </template>
            </n-empty>
          </div>
        </n-card>

        <!-- 操作按钮 -->
        <n-card title="路由操作" size="small">
          <n-space>
            <n-button type="primary" @click="goToDashboard">
              跳转到控制台
            </n-button>
            <n-button @click="goToWorkplace">
              跳转到工作台
            </n-button>
            <n-button @click="copyLink">
              复制用户链接
            </n-button>
            <n-button @click="generateUserLinks">
              生成多用户链接
            </n-button>
          </n-space>
        </n-card>

        <!-- 生成的链接 -->
        <n-card v-if="generatedLinks.length > 0" title="生成的用户链接" size="small">
          <n-list>
            <n-list-item v-for="link in generatedLinks" :key="link.user">
              <n-thing :title="link.user">
                <template #description>
                  <n-text code>{{ link.url }}</n-text>
                </template>
                <template #action>
                  <n-button size="small" @click="copyToClipboard(link.url)">
                    复制
                  </n-button>
                </template>
              </n-thing>
            </n-list-item>
          </n-list>
        </n-card>
      </n-space>
    </n-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { useMessage } from 'naive-ui';
import { useUniqueStr } from '@/composables/useUniqueStr';
import { useAccount } from '@/composables/useAccount';
import { navigateToUserPath } from '@/utils/route';

const route = useRoute();
const message = useMessage();
const { uniqueStr, getUcenterPath, getFullUrl } = useUniqueStr();
const {
  accountInfo,
  loading,
  error,
  isCacheExpired,
  cacheRemainingTime,
  refreshAccountInfo,
  clearAccountInfo,
} = useAccount();

const generatedLinks = ref<Array<{ user: string; url: string }>>([]);

// 格式化数字
const formatNumber = (value: string | number): string => {
  const num = typeof value === 'string' ? parseFloat(value) : value;
  return new Intl.NumberFormat('zh-CN', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  }).format(num);
};

// 获取余额类型
const getBalanceType = (balance: string): 'success' | 'error' | 'warning' => {
  const num = parseFloat(balance);
  if (num > 0) return 'success';
  if (num < 0) return 'error';
  return 'warning';
};

// 获取账户类型颜色
const getAccountTypeColor = (type: string): string => {
  switch (type) {
    case 'customer': return 'info';
    case 'admin': return 'success';
    case 'agent': return 'warning';
    default: return 'default';
  }
};

// 获取账户类型文本
const getAccountTypeText = (type: string): string => {
  switch (type) {
    case 'customer': return '客户';
    case 'admin': return '管理员';
    case 'agent': return '代理';
    default: return type;
  }
};

function goToDashboard() {
  navigateToUserPath('/dashboard/console');
}

function goToWorkplace() {
  navigateToUserPath('/dashboard/workplace');
}

function copyLink() {
  const link = getFullUrl('/dashboard/console');
  copyToClipboard(link);
}

function copyToClipboard(text: string) {
  navigator.clipboard.writeText(text).then(() => {
    message.success('链接已复制到剪贴板');
  }).catch(() => {
    message.error('复制失败');
  });
}

function generateUserLinks() {
  const users = ['user001', 'user002', 'user003', 'customer_ABC123', 'agent_XYZ789'];
  generatedLinks.value = users.map(user => ({
    user,
    url: `${window.location.origin}/ucenter/${user}/dashboard/console`
  }));
  message.success(`已生成 ${users.length} 个用户链接`);
}
</script>

<style scoped>
.example-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.example-card {
  margin-bottom: 20px;
}

.loading-container {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 20px;
  justify-content: center;
}

.error-container {
  text-align: center;
}

.retry-btn {
  margin-top: 12px;
}

.action-buttons {
  margin-top: 16px;
}

.no-data {
  text-align: center;
  padding: 20px;
}
</style>